<!--模块管理 basicInfoConfig-->
<template>
  <div class="commandManagement appMainWarp">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="">
        <el-input style="width:500px" v-model="searchKey.matchcontent" clearable placeholder="请输入学校名称，代理商名称，省份，市区 ，县区查询" @keyup.enter.native="onsearch" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onsearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="addChange">添加</el-button>
      </el-form-item>
    </el-form>

    <template>
      <el-table ref="table" :data="searchData" v-loading="page.tableLoading" center stripe border>
        <el-table-column prop="agentname" label="代理商名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="schoolname" label="学校名称" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="schooltype" label="代理商类型" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="props">
            {{props.row.schooltype==101?'小学':props.row.schooltype==102?'初中 ':props.row.schooltype==104?'（小学+初中）':props.row.schooltype==105?'（小+初+高）':'（小+初+高)'}}
            </template>
        </el-table-column>
        <el-table-column prop="contactphone" label="联系号码" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column prop="status" label="状态" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="props">
            {{props.row.status==1?'启用':'禁用'}}
            </template>
        </el-table-column>
        <!-- <el-table-column prop="addr" label="联系地址" header-align="center" align="center" show-overflow-tooltip /> -->
        <!-- <el-table-column prop="" label="地区" header-align="center" align="center" show-overflow-tooltip>
          <template slot-scope="props">
            {{props.row.provincename}} {{props.row.cityname	}} {{props.row.districtname}}
          </template>
        </el-table-column> -->
        <el-table-column prop="addr" label="联系地址" header-align="center" align="center" show-overflow-tooltip />
        <el-table-column label="操作" width="250">
          <template slot-scope="props">
            <el-button type="success" size="small" round  @click="editInfo(props.row)">修 改</el-button>
            <el-button type="danger" size="small" round  @click="delInfo(props.row)">删 除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <Pagination
      :total="page.totalRow"
      :page.sync="page.currentPage"
      :limit.sync="page.pageSize"
      @pagination="onSubmit"
    />
    <!-- 添加 修改 信息的弹框 -->
    <el-dialog :title="!addModel.item.agentid ? '新增' : '修改'" :visible.sync="addModel.flag" width="750px" :close-on-click-modal="false">
      <el-form ref="addModel" label-width="135px" :model="addModel.item">
        <div style="display:flex;">
          <el-form-item label="学校名称:" required>
            <el-input v-model="addModel.item.schoolname" placeholder="请输入学校名称" />
          </el-form-item>
          <el-form-item label="学校类型" required>
            <el-select v-model="addModel.item.schooltype" placeholder="请选择学校类型">
              <el-option label="小学" :value="101" />
              <el-option label="初中" :value="102" />
              <el-option label="高中" :value="103" />
              <el-option label="9年制（小+初）" :value="104" />
              <el-option label="12年制（小+初+高）" :value="105" />
              <el-option label="6年制（初+高）" :value="106" />
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="代理商" required>
            <el-select v-model="addModel.item.agentid" placeholder="请选择代理商">
              <el-option
                v-for="item in agentlist"
                :key="item.agentid"
                :label="item.agentname"
                :value="item.agentid">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="角色" required>
            <el-select v-model="addModel.item.roleid" placeholder="请选择角色">
              <el-option
                v-for="item in roleList"
                :key="item.Roleid"
                :label="item.Rolename"
                :value="item.Roleid">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="联系人名称:" required>
            <el-input v-model="addModel.item.contactman" type="input" placeholder="请输入联系人名称" />
          </el-form-item>
          <el-form-item label="联系方式:" required>
            <el-input v-model="addModel.item.contactphone" type="input" placeholder="请输入联系方式" />
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="联系地址:" required>
            <el-input v-model="addModel.item.contactaddr" type="input" placeholder="请输入联系地址" />
          </el-form-item>
          <el-form-item label="学校描述:" required>
            <el-input v-model="addModel.item.schoolnote" type="input" placeholder="请输入学校描述" />
          </el-form-item>
        </div>
        <div style="display:flex;">
          <el-form-item label="地址"  required>
            <el-cascader
              clearable 
              class="elCacader"
              v-model="areaValue"
              :props="defultProp"
              :options="addressMap"
              ref="areaCascader"
              @change="streetIdsChange"
            />
          </el-form-item>
          <el-form-item label="状态" required>
            <el-radio-group v-model="addModel.item.status">
              <el-radio :label="0">禁用</el-radio>
              <el-radio :label="1">启用</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addModel.flag = false">取 消</el-button>
        <el-button type="primary" @click="submitArea">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

//
import json from '@/assets/map.json' 
import {
  getrolelist,
  getagentlist,
  getSchoollist,
  addSchool,
  editSchool,
  delSchool
} from '@/api/basicInfo/index'
import Pagination from '@/components/Pagination' // 分页
const defaultAddItem = {
  agentid: null,
  roleid: '',
  schoolid: '',
  schoolname: '',
  schooltype: '',
  contactman: '',
  contactphone: '',
  contactaddr: '',
  schoolnote: '',
  status: 1 // 1:启用 0:禁用
}
export default {
  name: 'AgentManagement',
  components: { Pagination },
  data() {
    return {
      areaLabels:[],
      areaValue:[],
      addressMap:[],
      defultProp: {
        label: "name",
        value: "code",
        children: "sub"
      },
      roleList:[],
      agentlist:[],
      searchKey: {
        matchcontent: ''// 姓名
      },
      searchData: [], // 搜索的值
      page: {
        tableLoading: false,
        currentPage: 1, // 当前页
        pageSize: 10, // 默认条数
        totalRow: 0, // 总条数
        totalPage: 0 // 总页数
      },
      addModel: {
        flag: false,
        item: defaultAddItem
      }
    }
  },
  created(){ this.mapList()  },
  mounted() {
    this.rolelistData()
    this.agentlistData()
    this.onsearch()
  },
  methods: {
    streetIdsChange(val) {
      this.$nextTick(()=>{
          let data = this.$refs["areaCascader"].getCheckedNodes(true);   
          this.areaValue = data[0].path          
          this.areaLabels = data[0].pathLabels            
      })                
    },
    mapList(){
      this.addressMap =json; 
    },
    agentlistData(){
      var params = {}
      params.pageindex = 1 // 当前页数
      params.pagesize = 1000 // 每页展示条数
      params.agentname = ''
      getagentlist(params)
          .then((res) => {
            this.agentlist = res.data.data.datalist
          })
          .catch(() => {
          })
    },
    rolelistData(){
      var params = {}
      params.pageindex = 1 // 当前页数
      params.pagesize = 1000 // 每页展示条数
      params.roletype = 0
      getrolelist(params)
          .then((res) => {
            this.roleList = res.data.data.datalist
          })
          .catch(() => {
          })
    },
    addChange() {
      this.areaLabels = []
      this.areaValue = []
      this.addModel.item = Object.assign({}, defaultAddItem)
      this.addModel.flag = true
    },
    editInfo(row) {
      this.addModel.item = Object.assign({}, row)
      this.areaValue = [row.provincecode,row.citycode,row.districtcode]
      this.addModel.flag = true
    },
    submitArea() {
      var that = this
      var params = {}
      if (that.addModel.item.schoolid) {
        params.schoolid = that.addModel.item.schoolid
      }
      params.schoolname = that.addModel.item.schoolname
      params.schooltype = that.addModel.item.schooltype
      params.status = that.addModel.item.status
      params.contactman = that.addModel.item.contactman
      params.contactphone = that.addModel.item.contactphone
      params.contactaddr = that.addModel.item.contactaddr
      params.schoolnote = that.addModel.item.schoolnote
      params.roleid = that.addModel.item.roleid
      params.agentid = that.addModel.item.agentid
      params.provincecode = this.areaValue[0]
      params.citycode = this.areaValue[1]
      params.districtcode = this.areaValue[2]
      params.provincename = this.areaLabels[0]
      params.cityname = this.areaLabels[1]
      params.districtname = this.areaLabels[2]
      if(!params.schoolname){
        this.$message({
          type: 'warning',
          message: '学校名称不能为空！'
        })
        return false
      }
      if(!params.schooltype){
        this.$message({
          type: 'warning',
          message: '学校类型不能为空！'
        })
        return false
      }
      if(!params.agentid && params.agentid!=0){
        this.$message({
          type: 'warning',
          message: '代理商不能为空！'
        })
        return false
      }
      if(!params.roleid){
        this.$message({
          type: 'warning',
          message: '角色不能为空！'
        })
        return false
      }
      if(!params.contactman){
        this.$message({
          type: 'warning',
          message: '联系人名称不能为空！'
        })
        return false
      }
      if(!params.contactphone){
        this.$message({
          type: 'warning',
          message: '联系方式不能为空！'
        })
        return false
      }
      if(!params.contactaddr){
        this.$message({
          type: 'warning',
          message: '联系地址不能为空！'
        })
        return false
      }
      if(!params.schoolnote){
        this.$message({
          type: 'warning',
          message: '学校描述不能为空！'
        })
        return false
      }
      if(this.areaValue.length<=0){
        this.$message({
          type: 'warning',
          message: '地址不能为空！'
        })
        return false
      }
      var loginInit = that.$loading()
      if (params.schoolid) {
        editSchool(params)
          .then((res) => {
            loginInit.close()
            that.addModel.flag = false
            if (res.data.code == 0) {
              that.$message({
                type: 'success',
                message: '修改成功！'
              })
            }else{
              that.$message({
                type: 'success',
                message: res.data.msg
              })
            }
            that.onsearch()
          })
          .catch(() => {
            loginInit.close()
          })
      } else {
        addSchool(params)
          .then((res) => {
            loginInit.close()
            that.addModel.flag = false
            if (res.data.code == 0) {
              that.$message({
                type: 'success',
                message: '新增成功！'
              })
            }else{
              that.$message({
                type: 'success',
                message: res.data.msg
              })
            }
            that.onsearch()
          })
          .catch(() => {
            loginInit.close()
          })
      }
    },
    // 删除
    delInfo(item) {
      this.$confirm('确定要删除此条记录吗？删除后不可恢复！', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var params = {}
        var that = this
        params.schoolid = item.schoolid
        delSchool(params).then(res => {
          if (res.data.code == 0) {
            that.$message({
              type: 'success',
              message: '删除成功'
            })
          }
          that.onsearch()
        }).catch(error => [
          that.$message({
            type: 'warning',
            message: '删除失败'
          })
        ])
      })
    },
    onsearch() {
      this.page.currentPage = 1
      this.onSubmit()
    },
    onSubmit() {
      var params = {}
      var that = this
      params.pageindex = that.page.currentPage // 当前页数
      params.pagesize = that.page.pageSize // 每页展示条数
      params.matchcontent = that.searchKey.matchcontent
      that.page.tableLoading = true
      getSchoollist(params)
        .then((res) => {
          that.page.tableLoading = false
          if (res.data.code == 0) {
            that.searchData = res.data.data.datalist
            that.page.totalRow = res.data.data.totalcount
          }else{
            that.$message({
              type: 'error',
              message: res.data.msg
            })
          }
        })
        .catch(() => {
          that.page.tableLoading = false
          
        })
    }

  }
}
</script>

<style scoped>
.el-input {
    width: 200px;
}
.el-table .el-button {
    display: inline-block;
    margin: 0 10px;
}
</style>
